<template>
  <div id="app">
    <virtual-list ref="list" style="height: 100%;width: 300px" :data-source="dataSource" :scrollToEnd="scrollToEnd">
    </virtual-list>
    <button style="position:absolute;top: 300px;left: 300px" @click="scrollToTop">Back to top</button>
  </div>
</template>

<script>


import VirtualList from "./components/virtual-list";

const dataSource = Array.from({length: 40}, (v, k) => k)

export default {
  name: 'App',
  components: {VirtualList},
  data() {
    return {
      dataSource: dataSource
    }
  },
  methods: {
    scrollToEnd(callback) {
      console.log('scrollToEnd')
      setTimeout(() => {
        callback()
        this.dataSource = this.dataSource.concat(dataSource)
      }, 500)
    },
    scrollToTop(){
      this.$refs.list.scrollToTop()
    }
  }
}
</script>

<style>
html, body, #app {
  height: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0;
}
</style>
